@prefix-cls: ~'@{namespace}-h-tabs';

// html[data-theme='dark'] {
//   .@{prefix-cls} {
//   }
// }

// html[data-theme='light'] {
//   .@{prefix-cls} {
//   }
// }

.@{prefix-cls} {
  background-color: @component-background;
  // height: @multiple-height + 2;
  // line-height: @multiple-height + 2;
  border-bottom: 1px solid @border-color-default;
  // border-bottom: 1px solid @border-color-base;
  color: @text-color;

  .h-tabs {
    position: relative;
    display: flex;
    // padding: 12px 0;
    margin-bottom: 0;

    .h-tab-darg {
      flex: 1;
      display: flex;

      .h-tab {
        padding: 12px 6px;
        margin-right: 22px;
        font-weight: 500;

        &-active,
        &:hover {
          color: @primary-color;
          cursor: pointer;
        }
      }
    }

    .extra {
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .h-tabs-bar {
      position: absolute;
      bottom: -1px;
      width: 32px;
      height: 2px;
      background: @primary-color;
      border-radius: 2px;
      transition: left 0.3s, right 0.3s;
    }
  }
}
